<section class="gh-canvas">
    <header class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            {{link-to "Staff" "staff" data-test-staff-link=true}}
            <span>{{svg-jar "arrow-right"}}</span>
            {{user.name}}

            {{#if user.isSuspended}}
            <span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
            {{/if}}
        </h2>

        {{#if showLeaveSettingsModal}}
            {{gh-fullscreen-modal "leave-settings"
                confirm=(action "leaveSettings")
                close=(action "toggleLeaveSettingsModal")
                modifier="action wide"}}
        {{/if}}

        <section class="view-actions">
            {{#if userActionsAreVisible}}
                <span class="dropdown">
                    {{#gh-dropdown-button dropdownName="user-actions-menu" classNames="gh-btn gh-btn-default gh-btn-icon only-has-icon user-actions-cog" title="User Actions" data-test-user-actions=true}}
                        <span>
                            {{svg-jar "settings"}}
                            <span class="hidden">User Settings</span>
                        </span>
                    {{/gh-dropdown-button}}
                    {{#gh-dropdown name="user-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}}
                        {{#if canMakeOwner}}
                            <li>
                                <button {{action "toggleTransferOwnerModal"}}>
                                    Make Owner
                                </button>
                                {{#if showTransferOwnerModal}}
                                    {{gh-fullscreen-modal "transfer-owner"
                                                          confirm=(action "transferOwnership")
                                                          close=(action "toggleTransferOwnerModal")
                                                          modifier="action wide"}}
                                {{/if}}
                            </li>
                        {{/if}}
                        {{#if deleteUserActionIsVisible}}
                            <li>
                                <button {{action "toggleDeleteUserModal"}} class="delete" data-test-delete-button>
                                    Delete User
                                </button>
                            </li>
                            {{#if user.isActive}}
                                <li>
                                    <button {{action "toggleSuspendUserModal"}} class="suspend" data-test-suspend-button>
                                        Suspend User
                                    </button>
                                </li>
                            {{/if}}
                            {{#if user.isSuspended}}
                                <li>
                                    <button {{action "toggleUnsuspendUserModal"}} class="unsuspend" data-test-unsuspend-button>
                                        Un-suspend User
                                    </button>
                                </li>
                            {{/if}}
                        {{/if}}
                    {{/gh-dropdown}}
                </span>
            {{/if}}

            {{gh-task-button class="gh-btn gh-btn-blue gh-btn-icon" task=save data-test-save-button=true}}

            {{#if showDeleteUserModal}}
                {{gh-fullscreen-modal "delete-user"
                                      model=user
                                      confirm=(action "deleteUser")
                                      close=(action "toggleDeleteUserModal")
                                      modifier="action wide"}}
            {{/if}}

            {{#if showSuspendUserModal}}
                {{gh-fullscreen-modal "suspend-user"
                                      model=user
                                      confirm=(action "suspendUser")
                                      close=(action "toggleSuspendUserModal")
                                      modifier="action wide"}}
            {{/if}}

            {{#if showUnsuspendUserModal}}
                {{gh-fullscreen-modal "unsuspend-user"
                                      model=user
                                      confirm=(action "unsuspendUser")
                                      close=(action "toggleUnsuspendUserModal")
                                      modifier="action wide"}}
            {{/if}}
        </section>
    </header>

    <div class="gm-main view-container settings-user">
        <form class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform save) on="submit"}}>

          <figure class="user-cover" style={{background-image-style user.coverImageUrl}}>
              <button type="button" class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change Cover</span></button>
              {{#if showUploadCoverModal}}
                  {{gh-fullscreen-modal "upload-image"
                                        model=(hash model=user imageProperty="coverImage")
                                        close=(action "toggleUploadCoverModal")
                                        modifier="action wide"}}
              {{/if}}
          </figure>

          <figure class="user-image bg-whitegrey">
              <div id="user-image" class="img" style={{background-image-style user.profileImageUrl}}><span class="hidden">{{user.name}}"s Picture</span></div>
              <button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit Picture</button>
              {{#if showUploadImageModal}}
                  {{gh-fullscreen-modal "upload-image"
                                        model=(hash model=user imageProperty="profileImage" paramsHash=(hash purpose="profile_image"))
                                        close=(action "toggleUploadImageModal")
                                        modifier="action wide"}}
              {{/if}}
          </figure>

            <fieldset class="user-details-bottom">

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="name" class="first-form-group"}}
                    <label for="user-name">Full Name</label>
                    {{gh-text-input
                        id="user-name"
                        class="user-name"
                        placeholder="Full Name"
                        autocorrect="off"
                        value=(readonly user.name)
                        input=(action (mut user.name) value="target.value")
                        focus-out=(action "validate" "name" target=user)
                        data-test-name-input=true
                    }}
                    {{#if user.errors.name}}
                        {{gh-error-message errors=user.errors property="name" data-test-error="user-name"}}
                    {{else}}
                        <p>Use your real name so people can recognise you</p>
                    {{/if}}
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="slug"}}
                    <label for="user-slug">Slug</label>
                    {{gh-text-input
                        class="user-name"
                        id="user-slug"
                        name="user"
                        placeholder="Slug"
                        selectOnClick="true"
                        autocorrect="off"
                        value=(readonly slugValue)
                        input=(action (mut slugValue) value="target.value")
                        focus-out=(action (perform updateSlug slugValue))
                        data-test-slug-input=true
                    }}
                    <p>{{gh-blog-url}}/author/{{slugValue}}</p>
                    {{gh-error-message errors=user.errors property="slug" data-test-error="user-slug"}}
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="email"}}
                    <label for="user-email">Email</label>
                    {{!-- Administrators only see text of Owner's email address but not input --}}
                    {{#if canChangeEmail}}
                        {{gh-text-input
                            type="email"
                            id="user-email"
                            name="email"
                            placeholder="Email Address"
                            autocapitalize="off"
                            autocorrect="off"
                            autocomplete="off"
                            value=(readonly user.email)
                            input=(action (mut user.email) value="target.value")
                            focus-out=(action "validate" "email" target=user)
                            data-test-email-input=true}}
                        {{gh-error-message errors=user.errors property="email" data-test-error="user-email"}}
                    {{else}}
                        <span>{{user.email}}</span>
                    {{/if}}
                    <p>Used for notifications</p>
                {{/gh-form-group}}

                {{#if rolesDropdownIsVisible}}
                    <div class="form-group">
                        <label for="user-role">Role</label>
                        <span class="gh-select" tabindex="0">
                            {{one-way-select
                                id="new-user-role"
                                options=roles
                                optionValuePath="id"
                                optionLabelPath="name"
                                value=user.role
                                update=(action "changeRole")
                            }}
                        </span>
                        <p>What permissions should this user have?</p>
                    </div>
                {{/if}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="location"}}
                    <label for="user-location">Location</label>
                    {{gh-text-input
                        id="user-location"
                        value=(readonly user.location)
                        input=(action (mut user.location) value="target.value")
                        focus-out=(action "validate" "location" target=user)
                        data-test-location-input=true}}
                    {{gh-error-message errors=user.errors property="location" data-test-error="user-location"}}
                    <p>Where in the world do you live?</p>
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="website"}}
                    <label for="user-website">Website</label>
                    {{gh-text-input
                        type="url"
                        id="user-website"
                        autocapitalize="off"
                        autocorrect="off"
                        autocomplete="off"
                        value=(readonly user.website)
                        input=(action (mut user.website) value="target.value")
                        focus-out=(action "validate" "website" target=user)
                        data-test-website-input=true}}
                    {{gh-error-message errors=user.errors property="website" data-test-error="user-website"}}
                    <p>Have a website or blog other than this one? Link it!</p>
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="facebook"}}
                    <label for="user-facebook">Facebook Profile</label>
                    {{gh-text-input
                        type="url"
                        placeholder="https://www.facebook.com/username"
                        autocorrect="off"
                        id="user-facebook"
                        name="user[facebook]"
                        value=(readonly user.facebook)
                        input=(action (mut _scratchFacebook) value="target.value")
                        focus-out=(action "validateFacebookUrl")
                        data-test-facebook-input=true
                    }}
                    {{gh-error-message errors=user.errors property="facebook" data-test-error="user-facebook"}}
                    <p>URL of your personal Facebook Profile</p>
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="twitter"}}
                    <label for="user-twitter">Twitter Profile</label>
                    {{gh-text-input
                        type="url"
                        placeholder="https://twitter.com/username"
                        autocorrect="off"
                        id="user-twitter"
                        name="user[twitter]"
                        value=(readonly user.twitter)
                        input=(action (mut _scratchTwitter) value="target.value")
                        focus-out=(action "validateTwitterUrl")
                        data-test-twitter-input=true
                    }}
                    {{gh-error-message errors=user.errors property="twitter" data-test-error="user-twitter"}}
                    <p>URL of your personal Twitter profile</p>
                {{/gh-form-group}}

                {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="bio" class="bio-container"}}
                    <label for="user-bio">Bio</label>
                    {{gh-textarea
                        id="user-bio"
                        value=(readonly user.bio)
                        input=(action (mut user.bio) value="target.value")
                        focus-out=(action "validate" "bio" target=user)
                        data-test-bio-input=true
                    }}
                    {{gh-error-message errors=user.errors property="bio" data-test-error="user-bio"}}
                    <p>
                        Write about you, in 200 characters or less.
                        {{gh-count-characters user.bio}}
                    </p>
                {{/gh-form-group}}

                <hr />

            </fieldset>

        </form> {{! user details form }}

        {{!-- If an administrator is viewing Owner's profile then hide inputs for change password --}}
        {{#if canChangePassword}}
            <form id="password-reset" class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform user.saveNewPassword) on="submit"}}>
                <fieldset>
                    {{#if isOwnProfile}}
                        {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="password"}}
                            <label for="user-password-old">Old Password</label>
                            {{gh-text-input
                                type="password"
                                id="user-password-old"
                                autocomplete="current-password"
                                value=(readonly user.password)
                                input=(action "updatePassword" value="target.value")
                                keyEvents=(hash
                                    Enter=(action (perform user.saveNewPassword))
                                )
                                data-test-old-pass-input=true
                            }}
                            {{gh-error-message errors=user.errors property="password" data-test-error="user-old-pass"}}
                        {{/gh-form-group}}
                    {{/if}}

                    {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="newPassword"}}
                        <label for="user-password-new">New Password</label>
                        {{gh-text-input
                            value=(readonly user.newPassword)
                            type="password"
                            autocomplete="new-password"
                            id="user-password-new"
                            input=(action "updateNewPassword" value="target.value")
                            keyEvents=(hash
                                Enter=(action (perform user.saveNewPassword))
                            )
                            data-test-new-pass-input=true
                        }}
                        {{gh-error-message errors=user.errors property="newPassword" data-test-error="user-new-pass"}}
                    {{/gh-form-group}}

                    {{#gh-form-group errors=user.errors hasValidated=user.hasValidated property="ne2Password"}}
                        <label for="user-new-password-verification">Verify Password</label>
                        {{gh-text-input
                            value=(readonly user.ne2Password)
                            type="password"
                            id="user-new-password-verification"
                            input=(action "updateNe2Password" value="target.value")
                            keyEvents=(hash
                                Enter=(action (perform user.saveNewPassword))
                            )
                            data-test-ne2-pass-input=true
                        }}
                        {{gh-error-message errors=user.errors property="ne2Password" data-test-error="user-ne2-pass"}}
                    {{/gh-form-group}}

                    <div class="form-group">
                        {{gh-task-button "Change Password" class="gh-btn gh-btn-red gh-btn-icon button-change-password" task=user.saveNewPassword data-test-save-pw-button=true}}
                    </div>
                </fieldset>
            </form> {{! change password form }}
        {{/if}}
    </div>
</section>
